<template>
	<view class="history-wrap">
		<!-- <view class="picker-date yf-flex-left">
			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" class="picker">
				{{'请选择'}}
			</picker>
			<tui-icon name="arrowdown" size="12"></tui-icon>
		</view> -->
		<ren-calendar ref='ren' :markDays='markDays'  @onDayClick='onDayClick'></ren-calendar>
		<!-- <view class="change" :open="false">选中日期：{{curDate}}</view> -->
		<view class="history-list-wrap">
			<!-- <view class="history-list-date">
				{{date}}
			</view> -->
			<template v-if="list.length>0">
				<view class="history-item" v-for="(item,index) in list" :key="id" @click="jumpTo('historyDetail',{info:JSON.stringify(item)})">
					<view class="history-item-top yf-flex-left">
						<tui-icon name="clock" size="16" color="#9B9B9B"></tui-icon>
						<view class="history-item-top-time">
							{{item.simpleDate}}
						</view>
						<tui-icon name="position" color="#3291F8" size="16"></tui-icon>
						<view class="history-item-top-addr conceal1">
							{{item.address}}
						</view>
					</view>
					<view class="history-item-center yf-flex">
						<image :src="imagePath+item.img" @click.stop="bindImg(imagePath+item.img)" mode="aspectFill"
							class="history-img" v-if="item.img"></image>
						<view class="history-item-center-text" v-if="item.desc">
							外出事由：{{item.desc||""}}
						</view>
					</view>
				</view>
			</template>
			<tui-no-data imgUrl="/static/common/empty_icon.png" imgWidth="465" imgHeight="387" marginTop="100"
				:fixed="false" v-else>还没有数据哦~
			</tui-no-data>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	export default {
		components: {
			RenCalendar
		},
		props: {
			userId: Number,
			address: String
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				list: [], 
				markDays: []
			};
		},
		computed: {
			...mapState(['imagePath']),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onReady() {
			let today = this.$refs.ren.getToday().date; 
			this.markDays.push(today);
		},
		methods: {
			// 跳转
			jumpTo(url, param) {
				this.$Router.navigateTo(url, param)
			},
			onDayClick(data) { 
				this.date =data.date;
				this.loadList('refresh');
			},
			// 点击图片
			bindImg(img) {
				uni.previewImage({
					urls: [img],
					current: 0
				})
			},
			// 加载列表
			loadList(source) {
				let that = this;
				let _params = {
					date: this.date
				}
				if (that.userId) {
					_params.userId = that.userId
				}
				if (that.address) {
					_params.address = that.address
				}
				that.$api.showLoading();
				that.$apis.punchList(_params).then(result => {
					that.$api.hideLoading();
					let _data = result;
					if (_data.code === 0) {
						if (source == 'refresh') {
							that.list = [];
						}
						that.list = _data.data;
					}
				});
			},
			// 打开时间选择器
			show(type) {
				this.dateType = type;
				this.$refs.dateTime.show();
			},
			// 选择时间
			bindDateChange(e) {
				//选择的结果
				console.log(e);
				this.date = e.detail.value;
				this.loadList('refresh');
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.history-wrap {
		width: 100%;

		.picker-date {
			width: 212rpx;
			height: 60rpx;
			border: 1px solid rgba(187, 187, 187, 1);
			margin-bottom: 25rpx;
			padding: 0 10rpx;

			.picker {
				font-size: 12+24rpx;
				color: rgba(16, 16, 16, 1);
				flex: 1;
			}
		}

		.history-list-wrap {
			width: 100%;
			padding-top: 40rpx;
			.history-list-date {
				color: #000;
				font-size: 12+36rpx;
				font-weight: bold;
				margin-bottom: 6rpx;
			}

			.history-item {
				padding: 24rpx 0;
				border-top: 1rpx solid #bbb;

				.history-item-top {
					margin-bottom: 24rpx;

					.history-item-top-time {
						font-size: 12+26rpx;
						color: #000;
						flex: 1;
						margin-left: 10rpx;
					}

					.history-item-top-addr {
						font-size: 12+24rpx;
						color: #828282;
						margin-left: 20rpx;
						max-width: 360rpx;
					}
				}

				.history-item-center {
					.history-img {
						width: 208rpx;
						height: 120rpx;
						margin-right: 13rpx;
					}

					.history-item-center-text {
						font-size: 12+24rpx;
						color: #828282;
						flex: 1;
					}
				}
			}
		}
	}
</style>